<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
  >
    <div style="margin-bottom: 15px">
      <div class="tabs-root" v-if="openType =='detailAll'">
        <div class="my-tabs">
          <el-tabs class="tabs-main" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in tabsData" :key="index" :label="item.label" :name="item.label">
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <urgeInfo
        :dialogVisible = dialogVisible
        :superviseOrderNum = superviseOrderNum
        v-if="activeName=='督办信息' && openType =='detailAll'"
      ></urgeInfo>
      <detailInfo
        v-else
        :id=id
        :dialogVisible = dialogVisible
        :openType=openType
        @success="success"
        @close="close"
      ></detailInfo>
    </div>
  </el-dialog>
</template>

<script>
import detailInfo from './detailInfo.vue'
import urgeInfo from '@/views/xy/common/urgeInfo'

export default {
  components: {
    detailInfo, urgeInfo
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    id: {},
    openType: {
      type: String,
      default: "add",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    superviseOrderNum:{
      type:String,
      default:""
    }
  },
  watch: {
    width: {
      handler(newVal, oldVal) {
        console.log("newVal===", newVal, oldVal);
        let w = this.width.split("%")[0];
        if (w >= 60) {
          this.rowspan = 2;
        } else {
          this.rowspan = 1;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible;
      },
      set() {
        this.close();
      },
    },
  },
  data() {
    return {
      activeName: "基本信息",
      tabsData: [
        {label: '基本信息'},
        {label: '督办信息'},
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log("切换====》",tab, event);
      this.activeComponents = this.tabsData[tab.index].label;
    },
    cancel(){
      this.close()
    },
    handleClose(done) {
      done()
      this.close()
    },
    success(){
      this.$emit('success')
    },
    close(){
      this.$emit('close')
    },
  },
};
</script>

<style lang="scss" scoped>
  .tabs-root {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px ;
    .my-tabs{
      background-color: transparent;
      flex-shrink: 0;
      .tabs-main:first-child{
        padding: 0 10px 0 0;
      }
      .tabs-main:{
        padding: 0 10px;
      }
    }
    ::v-deep .el-tabs__nav{
      // padding: 0 20px;
    }
    ::v-deep .el-tabs__header{
      margin: 0;
      background-color: white;
      padding-left: 0px !important;
    }
    ::v-deep .el-tabs__item{
      height: 46px;
      line-height: 46px;
    }
  }
  ::v-deep .el-dialog__body{
    padding: 0 20rem;
  }
</style>
